<div id="contents">
    <div id="searchBox">
        <div class="pageTitle"><img src="<?= IMG_DOMAIN ?>titles/head_6.gif" /></div>
    </div>
    <div>
        <div class="ct">
            <!-- start -->
            <div id="slider" class="flexslider">
                <? if($list): ?>
                    <ul class="slides">
                    <? foreach($list as $item): ?>
                        <li>
                            <a href="<?= DOMAIN.'beauty/view/'.$item['beauty_id'].'#down' ?>">
                                <img width="600px" height="350" src="<?= DATA_DOMAIN.'beauty/'.$item['cover_img'] ?>" />
                            </a>
                        </li>
                    <? endforeach ?>
                    </ul>
                <? endif  ?>
            </div>
            <div id="carousel" class="flexslider">
                <? if($list): ?>
                    <ul class="slides flex-control-thumbs">
                    <? foreach($list as $item): ?>
                        <li>
                            <img width="165px" height="96px" src="<?= DATA_DOMAIN.'beauty/'.$item['cover_img'] ?>" />
                        </li>
                    <? endforeach ?>
                    </ul>
                <? endif  ?>
            </div>
            <!-- end -->
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){

        //幻灯片
        $('#carousel').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            itemWidth: 165,
            itemMargin: 5,
            asNavFor: '#slider'
        });

        $('#slider').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: true,
            slideshow: false,
            sync: "#carousel"
        });



    })
        
</script>